<template>
	<article class="page page-pwddict-generator">
		<h4 class="text-center">社工密码字典生成器</h4>
		<form class="page-body">
			<div class="row">
				<div class="col-6 left">
					<fieldset>
						<legend>参数设置</legend>
						<div class="fieldset-content">
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">姓名拼音</label>
								<div class="row-flex-main">
									<input class="form-control" type="text" v-model.trim="username" placeholder="名字以空格分隔" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">出生日期</label>
								<div class="row-flex-main">
									<input class="form-control" type="text" v-model.trim="birthday" placeholder="年月日以空格分隔" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">电话号码</label>
								<div class="row-flex-main">
									<input class="form-control" type="text" v-model.trim="phone" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">QQ号码</label>
								<div class="row-flex-main">
									<input class="form-control" type="text" v-model.trim="qq" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">域名</label>
								<div class="row-flex-main">
									<input class="form-control" type="text" v-model.trim="domain" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">常用昵称</label>
								<div class="row-flex-main">
									<input class="form-control" type="text" v-model.trim="nickname" placeholder="请输入常用昵称" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">密码长度</label>
								<div class="row-flex-main">
									<input class="form-control" type="number" :min="6" v-model.trim="minLength" placeholder="下限" />
								</div>
								<div class="row-flex-main">
									<input class="form-control" type="number" :min="6" v-model.trim="maxLength" placeholder="上限" />
								</div>
							</div>
							<div class="form-group row-flex form-group-main">
								<label class="row-flex-prefix">其他</label>
								<div class="row-flex-main">
									<textarea class="form-control" v-model.trim="keywords" placeholder="请输入其他关键字"></textarea>
								</div>
							</div>
							<div class="form-group row-flex">
								<label class="row-flex-prefix"></label>
								<div class="row-flex-main">
									<x-button type="primary" block @click="submitHandler">生 成</x-button>
								</div>
							</div>
						</div>
					</fieldset>
				</div>
				<div class="col-6 right">
					<fieldset>
						<legend>生成结果</legend>
						<div class="fieldset-content">
							<div class="form-group form-group-main">
								<textarea class="form-control" v-model="result" readonly></textarea>
							</div>
						</div>
					</fieldset>
				</div>
			</div>
		</form>
	</article>
</template>

<script>
export default {
	name: 'pwddict-generator',
	data () {
		return {
			username: '',
			birthday: '',
			phone: '',
			qq: '',
			domain: '',
			nickname: '',
			keywords: '',
			result: '',
			pwdResult: [],
			minLength: 8,
			maxLength: 8,
			loadingCount: 0
		}
	},
	methods: {
		// 生成密码
		submitHandler () {
			this.pwdResult = []
			// Step 1
			this.step1Handler()
			// Step 2
			this.step2Handler()
			// Step 3
			this.step3Handler()
			this.result = this.pwdResult.join('\n')
		},
		step1Handler () {
			let list = []
			if (this.username) {
				let nameList = this.username.split(' ')
				for (let i = 0; i < nameList.length; i++) {
					list.push(nameList[0].toLowerCase())
					list.push(nameList[0].toUpperCase())
				}
				list.push(this.username)
			}
			if (this.birthday) {
				let birthdayList = this.birthday.split(' ')
				for (let i = 0; i < birthdayList.length; i++) {
					list.push(birthdayList[0].toLowerCase())
					list.push(birthdayList[0].toUpperCase())
				}
				list = [...list, ...birthdayList]
			}
			if (this.phone) {
				list.push(this.phone)
			}
			if (this.qq) {
				list.push(this.qq)
			}
			if (this.domain) {
				list.push(this.domain)
			}
			if (this.nickname) {
				list.push(this.nickname)
			}
			if (this.keywords) {
				let keywords = this.keywords.split('\n')
				list = [...list, ...keywords]
			}
			list = list.filter(v => (v && (v.length <= 16)))
			this.generateDict([...list])
		},
		step2Handler () {
			// 重叠字符
			let OverlapStr = '0123456789'
			let list = []
			for (let OverlapNum = 2; OverlapNum <= 3; OverlapNum++) {
				for (let i = 0; i < OverlapStr.length; i++) {
					let str = ''
					for (let j = 0; j < OverlapNum; ++j) {
						str += OverlapStr[i]
					}
					list.push(str)
				}
			}
			this.generateDict(list)
		},
		step3Handler () {
			let _this = this
			// 连续字符
			function continueChar (char1, char2) {
				let list = []
				for (let i = 2; i <= 3; i++) {
					let numStart = char1.charCodeAt()
					let numStop = char2.charCodeAt()
					for (let j = numStart; j <= numStop; j++) {
						if ((j + i - 1) > numStop) break
						let str = ''
						for (let k = 0; k < i; k++) {
							str += String.fromCharCode(k + j)
						}
						list.push(str)
					}
				}
				_this.generateDict(list)
			}
			continueChar('1', '9')
			continueChar('A', 'Z')
			continueChar('a', 'z')
		},
		generateDict (list, pwd = []) {
			let len = list.length
			if (len <= 0 && pwd.length) return pwd.join('')
			for (let i = 0; i < len; i++) {
				pwd = pwd || []
				pwd.push(list[i])
				let pwdStr = pwd.join('')
				if (pwdStr.length > this.maxLength) continue
				if (pwdStr.length >= this.minLength) {
					this.pwdResult.push(pwdStr)
				}
				// this.generateDict(list.slice(1), pwd)
				this.generateDict(list, pwd)
			}
			return pwd.join('')
		}
	},
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-pwddict-generator {
	display: flex;
	flex-direction: column;
	fieldset {
		height: 100%;
		.fieldset-content {
			height: calc(100% - 2em);
			display: flex;
			flex-direction: column;
		}
	}
	.page-body {
		height: 0;
		flex-grow: 1;
		& > .row {
			height: 100%;
		}
		.form-group-main {
			align-items: stretch;
			height: 0;
			flex-grow: 1;
		}
		.left {
			.row-flex {
				.row-flex-prefix {width: 4.5em; text-align: right;}
				& + .row-flex {
					margin-top: .5em;
				}
			}
			textarea {
				display: block;
				width: 100%;
				height: 100%;
				background-color: #fff;
				resize: none;
			}
		}
		.right {
			textarea {
				display: block;
				width: 100%;
				height: 100%;
				background-color: #fff;
				resize: none;
			}
		}
	}
}
</style>
